<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录 - 虚拟银行系统</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="/css/main.css">
  <style>
    /* Login page specific styles */
    body {
      background-color: var(--bg-color);
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .auth-container {
      width: 100%;
      max-width: 1200px;
      height: 600px;
      display: flex;
      border-radius: var(--border-radius-lg);
      overflow: hidden;
      box-shadow: var(--modal-shadow);
    }
    
    .auth-banner {
      flex: 1;
      background-color: var(--primary-color);
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: var(--spacing-xl);
      position: relative;
      overflow: hidden;
    }
    
    .auth-banner::before {
      content: '';
      position: absolute;
      top: -10%;
      right: -10%;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.1);
    }
    
    .auth-banner::after {
      content: '';
      position: absolute;
      bottom: -15%;
      left: -15%;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.05);
    }
    
    .auth-banner-title {
      font-size: 36px;
      font-weight: 600;
      margin-bottom: var(--spacing-md);
      z-index: 1;
    }
    
    .auth-banner-subtitle {
      font-size: 16px;
      text-align: center;
      max-width: 300px;
      margin-bottom: var(--spacing-lg);
      z-index: 1;
    }
    
    .auth-banner-features {
      margin-top: var(--spacing-lg);
      z-index: 1;
    }
    
    .auth-banner-feature {
      display: flex;
      align-items: center;
      margin-bottom: var(--spacing-md);
    }
    
    .auth-banner-feature-icon {
      margin-right: var(--spacing-md);
      font-size: 24px;
      color: var(--accent-color);
    }
    
    .auth-content {
      flex: 1;
      background-color: white;
      padding: var(--spacing-xl);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .auth-header {
      text-align: center;
      margin-bottom: var(--spacing-lg);
    }
    
    .auth-title {
      font-size: 24px;
      font-weight: 600;
      color: var(--title-color);
      margin-bottom: var(--spacing-sm);
    }
    
    .auth-subtitle {
      color: var(--light-text);
    }
    
    .auth-form {
      width: 100%;
      max-width: 360px;
      margin: 0 auto;
    }
    
    .remember-forgot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--spacing-md);
    }
    
    .auth-footer {
      text-align: center;
      margin-top: var(--spacing-xl);
      color: var(--light-text);
    }
    
    .social-login {
      display: flex;
      justify-content: center;
      margin-top: var(--spacing-lg);
    }
    
    .social-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 var(--spacing-sm);
      color: var(--text-color);
      transition: all 0.3s;
    }
    
    .social-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* Custom checkbox */
    .checkbox-container {
      display: flex;
      align-items: center;
    }
    
    .custom-checkbox {
      width: 18px;
      height: 18px;
      border: 1px solid var(--border-color);
      border-radius: 3px;
      margin-right: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    
    .custom-checkbox i {
      color: white;
      font-size: 12px;
      display: none;
    }
    
    input[type="checkbox"]:checked + .custom-checkbox {
      background-color: var(--secondary-color);
      border-color: var(--secondary-color);
    }
    
    input[type="checkbox"]:checked + .custom-checkbox i {
      display: block;
    }
    
    input[type="checkbox"] {
      display: none;
    }
    
    /* Responsive */
    @media (max-width: 991px) {
      .auth-banner {
        display: none;
      }
      
      .auth-container {
        max-width: 500px;
        height: auto;
      }
    }
    
    @media (max-width: 575px) {
      .auth-container {
        box-shadow: none;
        border-radius: 0;
      }
      
      .auth-content {
        padding: var(--spacing-lg);
      }
    }
  </style>
</head>
<body>
  <div class="auth-container">
    <!-- Left Banner -->
    <div class="auth-banner">
      <h1 class="auth-banner-title">虚拟银行系统</h1>
      <p class="auth-banner-subtitle">安全、便捷、专业的在线银行服务</p>
      
      <div class="auth-banner-features">
        <div class="auth-banner-feature">
          <div class="auth-banner-feature-icon">
            <i class="fas fa-shield-alt"></i>
          </div>
          <div>安全的账户管理</div>
        </div>
        <div class="auth-banner-feature">
          <div class="auth-banner-feature-icon">
            <i class="fas fa-exchange-alt"></i>
          </div>
          <div>便捷的资金转账</div>
        </div>
        <div class="auth-banner-feature">
          <div class="auth-banner-feature-icon">
            <i class="fas fa-chart-line"></i>
          </div>
          <div>丰富的理财产品</div>
        </div>
        <div class="auth-banner-feature">
          <div class="auth-banner-feature-icon">
            <i class="fas fa-hand-holding-usd"></i>
          </div>
          <div>灵活的贷款服务</div>
        </div>
      </div>
    </div>
    
    <!-- Right Login Form -->
    <div class="auth-content">
      <div class="auth-header">
        <h2 class="auth-title">欢迎回来</h2>
        <p class="auth-subtitle">请登录您的账户</p>
      </div>
      
      <form class="auth-form" id="login-form">
        <div class="form-group">
          <label class="form-label" for="username">用户名</label>
          <div class="input-with-icon">
            <i class="fas fa-user"></i>
            <input type="text" id="username" name="username" class="form-control" placeholder="请输入用户名" required>
          </div>
          <div class="form-error" id="username-error"></div>
        </div>
        
        <div class="form-group">
          <label class="form-label" for="password">密码</label>
          <div class="input-with-icon">
            <i class="fas fa-lock"></i>
            <input type="password" id="password" name="password" class="form-control" placeholder="请输入密码" required>
            <button type="button" class="input-icon-right toggle-password">
              <i class="fas fa-eye-slash"></i>
            </button>
          </div>
          <div class="form-error" id="password-error"></div>
        </div>
        
        <div class="remember-forgot">
          <div class="checkbox-container">
            <input type="checkbox" id="remember-me" name="remember-me">
            <label for="remember-me" class="custom-checkbox">
              <i class="fas fa-check"></i>
            </label>
            <label for="remember-me">记住我</label>
          </div>
          <a href="/forgot-password.html" class="btn-link">忘记密码?</a>
        </div>
        
        <button type="submit" class="btn btn-primary btn-block">登录</button>
        
        <div class="social-login">
          <p>或者使用以下方式登录</p>
          <div class="social-buttons">
            <a href="#" class="social-btn" title="微信登录">
              <i class="fab fa-weixin"></i>
            </a>
            <a href="#" class="social-btn" title="QQ登录">
              <i class="fab fa-qq"></i>
            </a>
            <a href="#" class="social-btn" title="微博登录">
              <i class="fab fa-weibo"></i>
            </a>
          </div>
        </div>
      </form>
      
      <div class="auth-footer">
        <p>还没有账户? <a href="/register.html">立即注册</a></p>
      </div>
    </div>
  </div>

  <!-- Scripts -->
  <script src="/js/utils/Utils.js"></script>
  <script src="/js/components/Toast.js"></script>
  <script src="/js/services/ApiService.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Login form submission
      const loginForm = document.getElementById('login-form');
      const usernameInput = document.getElementById('username');
      const passwordInput = document.getElementById('password');
      const usernameError = document.getElementById('username-error');
      const passwordError = document.getElementById('password-error');
      const rememberMe = document.getElementById('remember-me');
      
      // If user is already logged in, redirect to dashboard
      if (ApiService.isAuthenticated()) {
        window.location.href = '/index.html';
      }
      
      // Toggle password visibility
      const togglePassword = document.querySelector('.toggle-password');
      if (togglePassword) {
        togglePassword.addEventListener('click', function() {
          const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
          passwordInput.setAttribute('type', type);
          
          // Toggle icon
          const icon = this.querySelector('i');
          if (type === 'password') {
            icon.classList.replace('fa-eye', 'fa-eye-slash');
          } else {
            icon.classList.replace('fa-eye-slash', 'fa-eye');
          }
        });
      }
      
      // Form validation
      function validateForm() {
        let isValid = true;
        
        // Reset errors
        usernameError.textContent = '';
        passwordError.textContent = '';
        
        // Validate username
        if (!usernameInput.value.trim()) {
          usernameError.textContent = '请输入用户名';
          isValid = false;
        }
        
        // Validate password
        if (!passwordInput.value) {
          passwordError.textContent = '请输入密码';
          isValid = false;
        } else if (passwordInput.value.length < 6) {
          passwordError.textContent = '密码至少需要6个字符';
          isValid = false;
        }
        
        return isValid;
      }
      
      // Form submission
      loginForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        if (!validateForm()) {
          return;
        }
        
        // Show loading state
        const submitButton = loginForm.querySelector('button[type="submit"]');
        const originalText = submitButton.textContent;
        submitButton.disabled = true;
        submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录中...';
        
        // Call login API
        fetch('/api/user/login', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            username: usernameInput.value.trim(),
            password: passwordInput.value
          })
        })
        .then(response => response.json())
        .then(data => {
          // Reset submit button
          submitButton.disabled = false;
          submitButton.textContent = originalText;
          
          if (data.code === 0 && data.data) {
            // Login successful
            const { token, id, username } = data.data;
            
            // Store token
            ApiService.setAuthToken(token, rememberMe.checked ? 7 * 24 * 60 * 60 : 2 * 60 * 60);
            
            // Store basic user info in local storage for quick access
            localStorage.setItem('userInfo', JSON.stringify({
              id,
              username
            }));
            
            // Show success message and redirect
            Toast.success('登录成功');
            
            // Redirect to dashboard after a short delay
            setTimeout(() => {
              window.location.href = '/index.html';
            }, 500);
          } else {
            // Login failed
            Toast.error(data.message || '登录失败，请检查用户名和密码');
          }
        })
        .catch(error => {
          // Reset submit button
          submitButton.disabled = false;
          submitButton.textContent = originalText;
          
          // Show error
          console.error('Login error:', error);
          Toast.error('登录出错，请稍后再试');
        });
      });
    });
  </script>
</body>
</html>
